/* 样式重置 */
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 去除点击高亮效果 */
}
/*
* 小炭火应援色： #ffe105
* 小红书色号：#FF2442
* 火焰渐变色： background: radial-gradient(circle at center,#093560 1%,#ecb886 20%, #fdc04d 30%, #ce5411 50%, );
* 葡萄酱紫： #5A1216
* 茶花红：#EE3F4D
* 淡青紫： #E0CBD1
* 鸦青：#424C50
* 檀紫：#381924
*/
/* 定义全局 CSS 变量 */
:root {
    /* 颜色变量 */
    --primary-color: #007aff; /* 主色调 */
    --secondary-color: #5856d6; /* 次色调 */
    --success-color: #4cd964; /* 成功颜色 */
    --warning-color: #ffcc00; /* 警告颜色 */
    --danger-color: #ff3b30; /* 危险颜色 */
    --background-color: #f8f9fa; /* 背景颜色 */
    --text-color: #333; /* 文本颜色 */
    --text-light-color: #999; /* 浅色文本颜色 */

    /* 字体变量 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;

    /* 间距变量 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* 边框变量 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-color: #e0e0e0;
}

/* 基础字体设置 */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-color);
    background-color: var(--background-color);
}

/* 链接样式 */
a {
    color: var(--primary-color);
    text-decoration: none;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* 按钮样式 */
button {
    font-family: var(--font-family);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

button.primary {
    background-color: var(--primary-color);
    color: white;
}

button.primary:hover {
    background-color: #0056b3;
}

button.secondary {
    background-color: var(--secondary-color);
    color: white;
}

button.secondary:hover {
    background-color: #423ebd;
}

/* 输入框样式 */
input,
textarea {
    font-family: var(--font-family);
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    -webkit-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* 标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: var(--font-size-xl);
}

h2 {
    font-size: var(--font-size-lg);
}

h3 {
    font-size: var(--font-size-base);
}
  
  /** 统一样式设置 **/
  /* 圆角 */
  .bor-rad25 {
    border-radius: 25%;
  }
  
  /* 按钮样式 */
  .btn-group{  /* 底部保存按钮 */ 
    width: 90%;
    position: fixed;
    bottom: 35px;
  }
  
  .red-btn {
    color: #ffffff;
    border-radius: 25px;
    background-color: #FF2442;
  }
  .gray-btn {
    background-color: #efefef;
    border-radius: 25px;
    border: 1px solid #e6e6e6;
  }
  .setting-btn {  
    /* width: 60px;
    height: 30px;
    border: solid 1px #fff;
    border-radius: 15px; */
    /* text-align: center; */
    position: absolute;
    top: 10px;
    right: 15px;
  }
  

  
  
  
  /* popup组件样式 */
  .popup-content{
    padding: 30px 15px;
  }
  
  
  /* 内边距和外边距 */
  .padT10 { padding-top: 10px; }
  .padR10 { padding-right: 10px; }
  .padB10 { padding-bottom: 10px; }
  .padL10 { padding-left: 10px; }
  .paddAny10 { padding: 10px; }
  
  .margT10 { margin-top: 10px; }
  .margR0 { margin-right: 10px; }
  .margB10 { margin-bottom: 10px; }
  .margL10 { margin-left: 10px; }
  .margAny10 { margin: 10px; }
  
  .margT20 { margin-top: 20px; }
  .margR20 { margin-right: 20px; }
  .margB20 { margin-bottom: 20px; }
  .margL20 { margin-left: 20px; }
  .margAny20 { margin: 20px; }
  
  /* 图片尺寸设置 */
  .avatar-img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: 0px 0px 20px 1px #E0CBD1;
  }
  
  /* title-设置 */
  .avatar-title {
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    color: #efefef;
  }
  
  /* 盒子模型： box */
  .box-border {
    box-sizing: border-box;  /* width 和 height 属性包括内容，内边距和边框，但不包括外边距。 */
  }
  /* 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框、内边距、外边距。 */
  .conten-box {
    box-sizing: content-box;  
  }
  
  /* 申请类--表单 */
  .apply-order {  
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card-order {
    width: 100%;
    height: 100%;
    margin-top: 60px;
  }

  
  
  